<template>
    <fieldset>
        <legend>商品</legend>
        <h1>商品:product</h1>
        <ul>
            <li v-for="item in products" :key="item.id">
                <b>商品名称:{{ item.title}}</b>
                -------
                <b>价格:{{ item.price }}</b>
                -------
                <b>库存:{{ item.inventory }}</b>
                -------
                <button @click="add(item)" :disabled="item.inventory===0">+加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>

<script>
import { mapActions, mapState } from 'vuex';

export default {
    computed:{
        ...mapState('product',['products'])
    },
    mounted(){
        this.FETCH_PRODUCT()
    },
    methods:{
        ...mapActions('product',['FETCH_PRODUCT','ADD_CART']),
        
        add(item){
            this.ADD_CART(item)
        }
    }
}
</script>